<!DOCTYPE html>
<html>
<head>
    <title>Piston Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define coordinates and dimensions
    const cylX = 50;
    const cylY = 150;
    const cylWidth = 450;
    const cylHeight = 100;
    const pistonWidth = 25;
    const pistonX = cylX + cylWidth / 2 - pistonWidth / 2;
    const pistonY = cylY;
    const pistonHeight = cylHeight;

    // Set a font that mimics the handwritten style
    ctx.font = '28px "Comic Sans MS", cursive, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Draw the main container ---
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'black';
    ctx.strokeRect(cylX, cylY, cylWidth, cylHeight);

    // --- Draw the piston ---
    // Piston outline
    ctx.lineWidth = 3;
    ctx.strokeRect(pistonX, pistonY, pistonWidth, pistonHeight);

    // Piston hatching
    ctx.save();
    ctx.beginPath();
    ctx.rect(pistonX, pistonY, pistonWidth, pistonHeight);
    ctx.clip(); // Restrict drawing to the piston's rectangle

    ctx.lineWidth = 2.5;
    ctx.beginPath();
    const step = 10;
    for (let i = -pistonHeight; i < pistonWidth; i += step) {
        ctx.moveTo(pistonX + i, pistonY);
        ctx.lineTo(pistonX + i + pistonHeight, pistonY + pistonHeight);
    }
    ctx.stroke();
    ctx.restore(); // Remove the clipping mask

    // --- Draw the text labels ---
    // Neon
    const neonX = cylX + (pistonX - cylX) / 2;
    const textY = cylY + cylHeight / 2;
    ctx.fillText('neon', neonX, textY);

    // Argon
    const argonX = pistonX + pistonWidth + (cylX + cylWidth - (pistonX + pistonWidth)) / 2;
    ctx.fillText('argon', argonX, textY);

    // Piston label
    const pistonLabelX = 380;
    const pistonLabelY = 100;
    ctx.fillText('piston', pistonLabelX, pistonLabelY);

    // --- Draw the arrow for the piston label ---
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(pistonLabelX - 50, pistonLabelY + 15); // Start point near the 'p' of piston
    ctx.quadraticCurveTo(310, 140, pistonX + pistonWidth, pistonY); // Curve to the top-right of the piston
    ctx.stroke();

    // --- Draw the figure caption ---
    ctx.font = '24px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('Fig. 1.31.', canvas.width / 2, 300);

</script>
</body>
</html>